@charset "utf-8";
@import 'color';
@import 'model-beta';
@import 'theme';
@import 'mobile.personal';

#jSouperApp._pc{

	*{
		// margin: auto auto;
		// font-size: 13px;
	}
	a{
		color: $black;
	}
	hr{
		width: 100%;
		background-color: $grayLighter;
		margin: 15px auto;
	}
	button{
		padding: 8px 15px;
		border: 0;
		background-color: $white;
		@include shadow(0,1px,5px,#C2BEBE);
		color: $black;
		margin: auto 5px;
		@include radius(2);
		@include comic_1(0.5,0);
		&:hover{
			background-color: $grayLighter;
		}
	}
	#top{
		width: 920px;
		height: 120px;
		background-color: $grayLighter;
		margin-top: 15px;
		padding: 0 20px;
		#context{
			color: $silver;
			width: 920px;
			height: 120px;
			font-family: "Arial";
			.user-img{
				width: 100px;
				height: 100px;
				margin-left: 0;
				margin-top: 10px;
				float: left;
				img{
					width: 100px;
					height: 100px;
				}
			}
			.content{
				width: 400px;
				height: 90px;
				margin-left: 20px;
				float: left;
				.content-item{
					margin-top: 15px;
					height: 20px;
					.real-name{
						color: $black;
						font-weight: bold;
					}
				}
			}
			.info{
				width: 380px;
				height:90px;
				margin-left: 20px;
				float: left;
				.info-content{
					margin-top: 15px;
					height: 20px;
					.login-time{
						color: $red;
					}
					.wait-deal{
						color: $red;
						cursor: pointer;
					}
				}
			}
		}
	}

	.main{
		width: 1024px !important;
		margin-top: 15px;
		clear: both;
		.list-button{
			display: inline-block;
			vertical-align: top;
			color: $fontColor;
			// min-height: 200px
			a{
				display: block;
			}
			.li{
				display: block;
			}
			
		}

		.right{
			font-size: 12px;
			width: 890px;
			min-height: 200px;
			display: inline-block;
			vertical-align: top;
			margin-left: 20px;
			.nav{
				width: 900px;
				.nav-li{
					font-size: 14px;
					@include radius(2);
					display: inline-block;
					vertical-align: top;
					padding: 8px 20px;
					cursor: pointer;
					margin-right: 15px;
					background-color: $white;
					@include comic_1(0.5,0);
					@include shadow(0,0,0,$white);
					&:hover{
						@include shadow(0,1px,6px,#C2BEBE);
						background-color: $grayLighter;
					}
					&.focus{
						@include shadow(0,1px,6px,#C2BEBE);
					}
				}
			}
			
			.orders{
				.order-box{ 
					width: 850px;
					margin-top: 10px;
					@include shadow(0,1px,6px,#C2BEBE);
					@include radius(2);
					.title{
						font-size: 14px;
						padding: 8px;
						border-bottom: 1px solid #ddd;
						background-color: $grayLighter;
					}
					.cover{
						position: fixed;
						z-index: 1499;
						background-color: rgba($black,0.4);
						width: 100%;
						height: 0;
						top: 0;
						left: 0;
						@include comic_1(0.3,0);
						&.focus{
							height: 100%;
						}
					}
					.alipayform{
						position: fixed;
						z-index: 1500;
						background-color: $white;
						width: 320px;
						height: 0;
						top: 25%;
						left: 35%;
						@include comic_1(0.3,0);
						overflow: hidden;
						&.focus{
							height: 110px;
						}
						.formtitle{
							width: 300px;
							padding: 10px;
							font-size: 16px;
							font-weight: bold;
							background-color: $themeColor;
							color: $fontColor;
						}
						.forminfo{
							width: 300px;
							padding: 10px;
							.formitem{
								margin: 5px 0;
								text-align: center;
								form{
									display: inline-block;
									input[type='submit']{
										padding: 8px 15px;
										border: 0;
										background-color: $white;
										@include shadow(0,1px,5px,#C2BEBE);
										color: $black;
										margin: auto 5px;
										@include radius(2);
										@include comic_1(0.5,0);
										&:hover{
											background-color: $grayLighter;
										}
									}
								}
							}
						}
					}
					.detail{
						width: 98%;
						padding: 15px 1%;
						.goods{
							display: inline-block;
							vertical-align: top;
							width: 30%;
							padding-right: 3%;
							.goods-item{
								width: 100%;
								margin-bottom: 5px;
								.goods-image{
									width: 36px;
									height: 36px;
									margin-right: 5px;
									display: inline-block;
									vertical-align: top;
									img{
										@include shadow(0,0,4px,$grayLight);
										border-radius: 50%;
									}
								}
								.goods-info-item{
									width: 200px;
									height: 36px;
									line-height: 36px;
									display: inline-block;
									@include newLine;
									a{
										color: $cyan;
									}
								}
							}
						}
						.price{
							width: 30%;
							display: inline-block;
							vertical-align: top;
							padding-right: 3%;
							.price-item{
								@include newLine;
								line-height: 20px;
								&.first{
									font-weight: bold;
									margin-top: 0;
								}
							}
						}
						.method{
							width: 33%;
							display: inline-block;
							vertical-align: top;
							padding-right: 1%;
							input[type="text"]{
								width: 80px;
								margin: 5px 0;
							}
							button{
								margin: 0.5rem;
							}
						}
					}			
				}
			}


			.collection{
				width: 900px;
				min-height: 150px;
				.collection-box{
					@include newLine();
					width: 900px;
					min-height: 100px;
					margin-top: 15px;
					.storeitem{
						margin-bottom: 15px;
						padding: 10px 1%;
						@include radius(2);
						@include shadow(0,1px,6px,$grayLight);
						background-color: rgba($white,0.5); 
						width: 98%;
						.storeinfo{
							width: 20%;
							text-align: center;
							display: inline-block;
							vertical-align: top;
							.logo{
								width: 50px;
								height: 50px;
								overflow: hidden;
								margin-bottom: 10px;
								@include shadow(0,1px,6px,#C0C0C0);
								@include radius(25);
								img{
									width: 50px;
									height: 50px;
								}
							}
							.storename{
								@include Line(2);
								padding: 0 10px;
							}
						}
						.storenew{
							width: 80%;
							display: inline-block;
							vertical-align: top;
							.newtitle{
								width: 90px;
								height: 20px;
								line-height: 20px;
								background-color: $white;
								border: 1px solid $grayLighter;
								text-align: center;
								margin-left: 1%;
								margin-bottom: 5px;
							}
							.box{
								width: 100%;
								.item{
									display: inline-block;
									width: 18%;
									margin: 0 1%;
									.goodsimg{
										width: 100%;
										height: 115px;
									}
									.price{
										text-align: center;
										color: $red;
										margin-top: 5px;
										font-size: 15px;
									}
								}
							}
						}
					}
					.goodsitem{
						display: inline-block;
						width: 23%;
						@include radius(2);
						margin: 1%;
						overflow: hidden;
						@include shadow(0,1px,6px,#a0a0a0);
						@include comic_1(0.5,0);
						&:hover{
							@include shadow(0,1px,15px,#777);	
						}
						.imgbox{
							width: 100%;
							overflow: hidden;
						}
						.goodsimg{
							margin-top: -15%;
							width: 100%;
						}
						.btnbox{
							text-align: right;
							width: 100%;
							button{
								padding: 0;
								border: 0;
								height: 25px;
								width: 25px;
								line-height: 25px;
								@include shadow(0,0,0,0);
								@include radius(0);
								margin-left: 5px;
								background-color: rgba($themeColor,0.5);
								&:hover{
									background-color: $themeColor;
								} 
							}
						}
						.infobox{
							width: 97%;
							padding: 2%;
							bottom: -50px;
							z-index: 2;
							text-align: center;
							background-color: rgba($white,0.6);
							.price{
								line-height: 25px;
								font-size: 15px;
								font-weight: bold;
								color: $red;
							}
						}
					}
				}
			}

			.evaluation{
				width: 900px;
				.evaluation_list{
					hr{
						clear: both;
					}
					width: 900px;
					margin-top: 10px;
					.evaluation_item{
						clear: both;
						width: 900px;
						min-height: 30px;
						margin-top: 10px;
						margin-bottom: 10px;
						.item{
							float: left;
							padding: 5px 0;
							@include newLine();
						}
						.score{
							width: 50px;
							text-align: center;
							color: $red;
							font-weight: bold;
						}
						.evaluation{
							width: 210px;
							padding-left: 20px;
							padding-right: 20px;
							.time{
								color: $silver;
							}
						}
						.buyer{
							width: 100px;
							padding-right: 20px;
							padding-left: 20px;
							span{
								color: $cyan;
							}
						}
						.goods{
							width: 250px;
							padding-left: 20px;
							padding-right: 20px;
							a{
								color: $blue;
							}
							.price{
								color: $orange;
							}
						}
					}
				}
			}
			.personalinfo{
				width: 900px;
				.info_box{
					width: 900px;
					.table{
						width: 450px;
						float: left;
						.item{
							margin: 0;
							clear: both;
							.title{
								float: left;
								font-weight: bold;
								color: $black;
								min-height: 25px;
								padding: 5px 0;
								width: 95px;
								margin-top: 10px;
							}
							.text{
								@include newLine();
								padding: 5px 0;
								float: left;
								margin-top: 10px;
								width: 355px;
								input{
									width: 175px;
								}
								img{
									width: 100px;
									height: 100px;
								}
							}
						}
					}
				}
			}


			.address{
				width: 900px;
				.add_address{
					width: 810px;
					padding: 10px 15px; 
					background-color: $grayLighter;
					.text{
						width: 810px;
						.addr{
							width: 810;
							select{
								margin-left: 15px;
								@include radius(2);
								@include shadow(0,1px,5px,#c0c0c0);
								padding: 3px 5px; 
								&.province{
									margin-left: 0;
								}
							}
							.detailed_addre{
								width: 250px;
								line-height: 1em;
								margin-left: 15px;
								padding: 3px 5px;
							}
						}
						.connect{
							width: 810px;
							margin: 10px 0;
							input{
								padding: 3px 5px;
								line-height: 1em;
								margin-left: 15px;
								max-width: 145px;
								&.name{
									margin-left: 0;
									width: 100px;
								}
							}
						}
					}
				}
				.addrs{
					width: 900px;
					margin-top: 15px;
					table{
						width: 800px;
						text-align: center;
						@include shadow(0,1px,8px,#c0c0c0);
						@include radius(2);
						overflow: hidden;
						border-collapse: collapse;
						thead{
							background-color: $ashen;
							border: 0;
							td{
								padding: 8px 5px; 
								font-size: 16px;
							}
						}
						td{
							padding: 5px;
							border: 0;
							overflow: hidden;
							text-align: center;
							@include newLine();
						}
					}
				}
			}
			.points{
				width: 900px;
				.box{
					width: 850px;
					table{
						border-collapse: collapse;
						@include radius(2);
						@include shadow(0,1px,8px,#c0c0c0);
						overflow: hidden;
						&.info{
							width: 800px;
							text-align: center;
							thead{
								td{
									padding: 8px 15px;
									font-size: 16px;
								}
								background-color: $grayLighter;
							}
							tr{
								background-color: $white;
								@include comic_1(0.5,0);
								&:hover{
									background-color: rgba($cyan,0.3);
								}
							}
							td{
								padding: 3px 5px;
							}
						}
					}
				}
			}
			.appraise{
				width: 900px;
				button{
					margin-left: 7%;
				}
				.info{
					width: 100%;
					.title{
						font-size: 20px;
					}
					.goodsitem{
						width: 85%;
						margin: 20px auto;
						@include radius(2);
						padding: 15px 8px;
						@include shadow(0,1px,15px,#999);
						.goodsinfo{
							.item{
								padding: 0 8px;
								display: inline-block;
								vertical-align: top;
								line-height: 20px;
								.goodsimg{
									width: 130px;
									height: 130px;
								}
								.name{
									color: $cyan;
								}
								.price{
									color: $red;
									margin-right: 15px;
								}
								.star{
									border: 0;
									padding: 3px;
									line-height: 1em;
									border-bottom: 1px solid $grayLight;
									outline: none;
									width: 30px;
									text-align: center;
								}
								textarea{
									width: 450px;
									height: 40px;
									padding: 3px;
									outline: none;
									resize: none;
								}
							}
						}
					}
				}
			}

			#turn-page{
				clear: both;
				margin-top: 15px;
				width: 320px;
				height: 25px;
				color: $fontColor;
				float: right;
				margin-right: 10px;
				.pre-page,.next-page{
					width: 25px;
					height: 25px;
					background-color: $themeColor;
					text-align: center;
					font-weight: bold;
					line-height: 25px;
					float: left;
					cursor: pointer;
					margin: 0 5px;
					&:hover{
						background-color: $btnHover;
					}
					&.disabled{
						background-color: $grayLight;
						cursor: text;
					}
				}
				.page{
					width: 25px;
					height: 25px;
					float: left;
					background-color:$themeColor;
					font-weight: bold;
					text-align: center;
					line-height: 25px;
					cursor: pointer;
					&:hover{
						background-color: $btnHover;
					} 
					&.selected{
						background-color: $btnHover;
					}
				}
			}
		}
	}
	#bottom{
		clear: both;
		width: 1056px;
		min-height: 122px;
		position: relative;
		top: 45px;
		margin-top: 22px;
		@include hr($themeColor);
		div{
			margin-top: 5px;
			text-align: center;
			color: $silver;
			font-size: 13px;
			a{
				color: $silver;
			}
		}
	}
}